<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layui
      th:replace="pages/common/main :: layout(~{::title}, ~{::section}, ~{}, ~{::script})">
    <head>
        <title>字典</title>
    </head>
    <body>
        <section>

            <div class="layui-fluid">

                <script type="text/html" id="toolBar">
                    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="create" layui:auth="/sys/dict/save">
                        <i class="layui-icon layui-icon-file-b">新建项目</i>
                    </a>
                    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="deleteBatch" layui:auth="/sys/dict/batch-delete">
                        <i class="layui-icon layui-icon-delete">批量删除</i>
                    </a>
                </script>

                <script type="text/html" id="tool">
                    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" layui:auth="/sys/dict/detail">查看</a>
                    <a class="layui-btn layui-btn-xs" lay-event="update" layui:auth="/sys/dict/save">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete" layui:auth="/sys/dict/delete">删除</a>
                </script>

                <script type="text/html" id="statusTpl">
                    {{# if (d.status === "ENABLE") { }}
                    <input type="checkbox" checked lay-skin="switch" lay-text="启用|禁用" lay-filter="switch-filter"
                           data-id="{{d.id}}"/>
                    {{# } else { }}
                    <input type="checkbox" lay-skin="switch" lay-text="启用|禁用" lay-filter="switch-filter"
                           data-id="{{d.id}}"/>
                    {{# } }}
                </script>

                <div class="layui-card">
                    <div class="layui-card-body">
                        <table id="dict-table" lay-filter="dict-table-filter"></table>
                    </div>
                </div>

            </div>

        </section>

        <script th:inline="javascript">

            layui.use(["grid", "form", "ax", "jquery", "admin"], function () {
                var grid = layui.grid,
                    form = layui.form,
                    $ax = layui.ax,
                    admin = layui.admin,
                    $ = layui.jquery;

                var dicttype = {}
                    , col = [

                    {type: 'checkbox'},
                    {field: 'id', hide: true},
                    {field: 'name', align: "center", edit: true, title: '字典名称'},
                    {field: 'code', align: "center", title: '字典编码'},
                    {field: 'description', align: "center", title: '值', edit: true},
                    {
                      width: 110,  field: 'status', align: "center", title: '状态', templet: "#statusTpl"
                    },
                    {width: 180, field: 'createTime', align: "center", sort: true, title: '创建时间'},
                    {align: 'center', toolbar: '#tool', title: '操作', width: 180}
                ];

                dicttype.table = {
                    height: "full-98",
                    cols: [col],
                    // url: "",
                    data: /*[[${data}]]*/[]
                };

                dicttype.eventOptions = {
                    create: {
                        url: "/sys/dict/form"
                    },
                    deleteBatch: {
                        url: "/sys/dict/batch-delete",
                        after: function (obj, param, that) {
                            admin.refresh()
                        }
                    },
                    update: {
                        url: "/sys/dict/form"
                    },
                    delete: {
                        url: "/sys/dict/delete",
                        after: function (obj, param, that) {
                            admin.refresh()
                        }
                    }
                }


                var options = {
                        tableId: "dict-table",
                        tableFilter: "dict-table-filter",
                        table: dicttype.table,
                        editor: {
                            url: Kong.ctxPath + "/sys/dict/edit"
                        },
                        eventOptions: dicttype.eventOptions
                    },
                    events = {};


                grid.render(options, events);

                form.on("switch(switch-filter)", function (data) {
                    var id = data.elem.getAttribute("data-id")
                    var ajax = new $ax(Kong.ctxPath + "/sys/dict/edit", function (data) {
                        Kong.success("修改成功！")
                    })
                    ajax.setDataDataValue("status", data.elem.checked ? "ENABLE" : "LOCKED")
                    ajax.setDataConditionValue("id", id)
                    ajax.sendJson()
                });

            });

        </script>


    </body>
</html>
